<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>第一次项目---博客 - Even - A super concise theme for Hugo</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="cuizx23333" /><meta name="description" content="构建个人博客的绕坑指南 写在前面 这篇博客是我写的第一篇博客。在写这篇博客之前，关于GitHub和Gitee的注册、vscode的使用、Mark" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.74.3 with theme even" />


<link rel="canonical" href="http://localhost:1313/post/project_1_myblog/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">



<link href="/sass/main.min.b5a744db6de49a86cadafb3b70f555ab443f83c307a483402259e94726b045ff.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="第一次项目---博客" />
<meta property="og:description" content="构建个人博客的绕坑指南 写在前面 这篇博客是我写的第一篇博客。在写这篇博客之前，关于GitHub和Gitee的注册、vscode的使用、Mark" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://localhost:1313/post/project_1_myblog/" />
<meta property="article:published_time" content="2020-09-09T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-09-09T00:00:00+00:00" />
<meta itemprop="name" content="第一次项目---博客">
<meta itemprop="description" content="构建个人博客的绕坑指南 写在前面 这篇博客是我写的第一篇博客。在写这篇博客之前，关于GitHub和Gitee的注册、vscode的使用、Mark">
<meta itemprop="datePublished" content="2020-09-09T00:00:00+00:00" />
<meta itemprop="dateModified" content="2020-09-09T00:00:00+00:00" />
<meta itemprop="wordCount" content="2123">



<meta itemprop="keywords" content="" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="第一次项目---博客"/>
<meta name="twitter:description" content="构建个人博客的绕坑指南 写在前面 这篇博客是我写的第一篇博客。在写这篇博客之前，关于GitHub和Gitee的注册、vscode的使用、Mark"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Even</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archives</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">Categories</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">About</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Even</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archives</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">Categories</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">About</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">第一次项目---博客</h1>

      <div class="post-meta">
        <span class="post-time"> 2020-09-09 </span>
        
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">Contents</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#构建个人博客的绕坑指南"><strong>构建个人博客的绕坑指南</strong></a>
      <ul>
        <li><a href="#写在前面"><strong>写在前面</strong></a></li>
        <li><a href="#一准备vscode">一、准备vscode</a></li>
        <li><a href="#二markdown语言的学习">二、MarkDown语言的学习</a></li>
        <li><a href="#三hugo博客框架的构建">三、Hugo博客框架的构建</a></li>
        <li><a href="#四gitee与github的创立及其与本地的同步">四、Gitee与GitHub的创立及其与本地的同步</a></li>
        <li><a href="#五md文件向静态网站的编译">五、md文件向静态网站的编译</a></li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h1 id="构建个人博客的绕坑指南"><strong>构建个人博客的绕坑指南</strong></h1>
<h2 id="写在前面"><strong>写在前面</strong></h2>
<p><strong>这篇博客是我写的第一篇博客。在写这篇博客之前，关于GitHub和Gitee的注册、vscode的使用、MarkDown排版的学习、Hugo博客框架的构建、md文件编译成静态网站的html文件等准备工作的繁琐程度是十分让人崩溃的。这些准备工作并不像百度经验或B站教程那样简单，由于个人电脑配置的不同，在这些过程中可能会遇到各种各样的问题，但我通过百度查询并和同学交流，逐一解决了这些问题。因此，本篇博客是用来帮助那些还未建站的同学解决一些建站过程中可能遇到的问题，同时也可以给自己总结一下经验。</strong></p>
<p><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=181604432,196216556&amp;fm=26&amp;gp=0.jpg" alt=""></p>
<h2 id="一准备vscode">一、准备vscode</h2>
<p>如果在之前没用过vscode，那么就需要下载一个并完成配置。篇幅原因，这里不会详细说明它们的配置，配置的问题也不会遇到很大的问题。大家可以点击下方链接下载并配置：<br>
<a href="https://visual-studio-code.en.softonic.com/">vscode下载链接</a><br>
<a href="https://www.bilibili.com/video/BV1CE411u7bT?from=search&amp;seid=10647128340577921762">vscode配置教程</a></p>
<h2 id="二markdown语言的学习">二、MarkDown语言的学习</h2>
<p>markdown作为一种比较简单的语言，可以同时完成文案与排版，很方便。在本地创建一个.md文件，并在vscode里编辑，即可完成博客文案的编写与排版的制作。<br>
<a href="https://www.bilibili.com/video/BV1ox411y7Mc">附：20min快速学习markdown</a><br>
当然，尤其要注意的是markdown的换行问题，要打两个空格之后换行才会真正的换行。
其次，是关于本地图片的问题，最好要将它放置在与md文件的同一个文件夹下，否则找路径的时候会非常麻烦。</p>
<h2 id="三hugo博客框架的构建">三、Hugo博客框架的构建</h2>
<p>这一部分卡了我很久，虽然在b站上看过了教程，但还是遇到了很多问题，搞得我一头雾水。<br>
<a href="https://www.bilibili.com/video/BV13c411h7k7/">附：hugo博客框架的构建指南</a><br>
主要的过程（包含遇到的问题）可以概括为以下几点：</p>
<ol>
<li>下载hugo，内部只有一个<code>hugo.exe</code>文件，十分简便。</li>
<li>配置环境变量，使得该应用能被命令行调用。</li>
<li>打开命令行，输入：  <code>hugo new site yourname.com </code>,其中yourname是你想创建的个人博客的域名。<br>
这里我遇到的问题是输入hugo后并没有显示<code>congratulations</code>(表示创建成功)的字样，就导致我没有yourname.com这个文件夹：
<img src="/pictures/myblogpicture1.png" alt="">
原因是我并没有将hugo.exe完全设置好环境变量，用户变量和系统变量的path都要设置环境变量。</li>
<li>点击链接，访问主题网站，选一个喜欢的主题并下载。将文件名中的<code>-master</code>删掉，防止后续出现文件名称混乱的情况。并将其拖入到yourname.com目录下的themes文件夹中。</li>
<li>主题的配置，这也是我遇到问题最多的一部分。主题配置的操作是将themes文件夹中的exampleSite内的全部文件copy到外层文件夹里，将toml文件覆盖掉。根据我失败多次的经验来看，在配置主题时，不仅要保证自己将内部需要复制的文件复制到外层文件夹中（不同的主题要求会有不同），还要保证复制并覆盖到正确的文件夹中（即与toml和content同一级的文件夹当中）。
<img src="/pictures/myblogpicture2.png" alt=""></li>
<li>在vscode里打开<code>yourname.com</code>的文件夹，在终端输入<code>hugo server</code>，当出现如下字样时：<br>
<img src="/pictures/myblogpicture3.png" alt="">
表示在本地创建成功。但是这是localhost，要借助Gitee或GitHub将它同步到云端。<br>
这里可能遇到的问题是用浏览器进入给定的localhost网站时显示<code>404 not found</code>，并在终端显示若干fatal errors或者warnings。这有极大可能是之前主题的.toml文件尚未配置好（极有可能是覆盖错了文件夹），因此需要重新配置（建议删除这些文件夹后返回第三步，重新开始，否则自己很难记清哪里已经操作过，哪里没操作，更容易混乱掉）。</li>
<li>通过更改md文件可以修改自己博客的内容，具体操作不在此赘述。</li>
</ol>
<h2 id="四gitee与github的创立及其与本地的同步">四、Gitee与GitHub的创立及其与本地的同步</h2>
<p>首先要先下载并配置好git，具体操作详见<a href="https://pmlpml.gitee.io/swi/post/homework-start/">作业要求</a>  。</p>
<p>由于二者的操作大同小异，所以以下仅以Gitee为例，简单概括其操作：</p>
<ol>
<li>注册账号并登录。</li>
<li>创建新仓库，注意仓库名可以随意，但路径一定要保证与自己的用户名完全相同。</li>
<li>根据新仓库内的提示，在本地文件夹打开git bash，输入相应的命令。根据网站的操作提示，将创建仓库一栏的内容复制到git bash命令行即可。<br>
<img src="/pictures/myblogpicture4.jpg" alt=""></li>
<li>同步后，在本地vscode修改md文件，保存，提交，推送（或同步）即可。需注意，提交时必须输入提交信息，否则是无法正常提交的，也就无法同步了。</li>
<li>需注意，根据作业要求，其中一个public仓库是要求存放个人博客的html文件的，另一个private的仓库是用来存放md代码的。因此需要在本地弄两个不同的文件夹，分别存放两个仓库的内容。</li>
</ol>
<h2 id="五md文件向静态网站的编译">五、md文件向静态网站的编译</h2>
<ol>
<li>用vscode将md文件编辑好后，保存，提交，推送到那个private仓库。</li>
<li>删除存储md源代码文件夹里的public文件夹，删除存储html文件夹里的所有文件。（这样是降低了每次更新编译后，对文件进行覆盖的不稳定性）</li>
<li>打开cmd，复制存储md源代码的文件夹路径，用命令行hugo进行编译。</li>
<li>编译完成后，找到新public文件夹，移动内容到存储html文件夹。</li>
<li>将这些静态文件通过vscode提交并推送到public那个仓库。</li>
<li>Gitee刷新，可以看到文件全部同步。找到服务一栏，通过Git Pages服务部署自己的个人博客网站。<br>
<img src="/pictures/myblogpicture5.jpg" alt=""></li>
<li>部署完成后，点开链接，刷新，就会惊喜的发现自己完成了博客网站的创建了。<br>
<img src="/pictures/myblogpicture6.jpg" alt=""></li>
</ol>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">Author</span>
    <span class="item-content">cuizx23333</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">LastMod</span>
    <span class="item-content">
        2020-09-09
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      
      <nav class="post-nav">
        <a class="prev" href="/post/homework_week1/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">第一周作业</span>
            <span class="prev-text nav-mobile">Prev</span>
          </a>
        <a class="next" href="/post/catelogue/">
            <span class="next-text nav-default">软件工程专业导论</span>
            <span class="next-text nav-mobile">Next</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
      <a href="http://localhost:1313" class="iconfont icon-stack-overflow" title="stack-overflow"></a>
      <a href="http://localhost:1313" class="iconfont icon-twitter" title="twitter"></a>
      <a href="http://localhost:1313" class="iconfont icon-facebook" title="facebook"></a>
      <a href="http://localhost:1313" class="iconfont icon-linkedin" title="linkedin"></a>
      <a href="http://localhost:1313" class="iconfont icon-google" title="google"></a>
      <a href="http://localhost:1313" class="iconfont icon-github" title="github"></a>
      <a href="http://localhost:1313" class="iconfont icon-weibo" title="weibo"></a>
      <a href="http://localhost:1313" class="iconfont icon-zhihu" title="zhihu"></a>
      <a href="http://localhost:1313" class="iconfont icon-douban" title="douban"></a>
      <a href="http://localhost:1313" class="iconfont icon-pocket" title="pocket"></a>
      <a href="http://localhost:1313" class="iconfont icon-tumblr" title="tumblr"></a>
      <a href="http://localhost:1313" class="iconfont icon-instagram" title="instagram"></a>
      <a href="http://localhost:1313" class="iconfont icon-gitlab" title="gitlab"></a>
      <a href="http://localhost:1313" class="iconfont icon-bilibili" title="bilibili"></a>
  <a href="http://localhost:1313/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    Theme - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2017 - 
    2021<span class="heart"><i class="iconfont icon-heart"></i></span><span>olOwOlo</span>
  </span>
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.c12618f9a600c40bd024996677e951e64d3487006775aeb22e200c990006c5c7.js"></script>








</body>
</html>
